<template>
  <div class="hello">
    <h4>响应式数据（同data和methods）</h4>
    {{ msg }} <input type="text" v-model="msg">
    <input type="button" @click="change" value="按钮1">
    <br>
    {{ obj }} <input type="text" v-model="obj.name">
    <input type="button" @click="change2" value="按钮2">
    <br>
    {{ arr }} <input type="text" v-model.number="arr[0].age">
    <br>
    {{ arr2 }} <input type="text" v-model.number="arr2[0].age"><input type="text" v-model.number="arr2[0]">
  </div>
</template>

<script setup>
// ref用来定义基本数据
// reactive用来定义复杂数据
import {ref, reactive, shallowReactive} from "vue";

// ref
let msg = ref("hello");
// ref返回的是一个响应式对象
console.log(msg);
console.log(msg.value);

function change(){
  // msg的值被保存在这个响应式对象的value属性内
  // msg不能直接修改，需要通过value属性修改
  msg.value = "world"
}


// reactive
let obj = reactive({name:"admin"});
function change2(){
  obj.name = "root"
}
// 非响应式数据
// let str = reactive("hahahah");

let arr = reactive([{age:18},{age:20}]);

let arr2 = shallowReactive([{age:18},{age:20}])






</script>

<style>
</style>
